<template>
  <section>
    <el-form label-width="80px">
      <el-form-item label="选部门">
        <filter-tool type="departmentId" test="name" v-on:confirm="getDepartmentId" :selVal="departmentId"></filter-tool>
      </el-form-item>
      <el-form-item label="标题">
        <el-input size="mini" v-model="ad.description" style="width: 50%;"></el-input>
      </el-form-item>
    </el-form>
    <el-form label-width="80px" inline>
      <el-form-item label="开始时间">
        <span v-if="!edit"  style="border: 1px solid #ccc;border-radius: 5px;padding: 5px">{{getDateFormater(ad.start)}}</span>
        <el-date-picker size="mini" v-model="ad.start" type="datetime" v-if="edit"
                        placeholder="选择日期时间" default-time="12:00:00"
                        format="yyyy-MM-dd HH:mm:ss" value-format="timestamp">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" style="width: 50%;border: 0px solid green">
        <el-row v-if="!edit && !delay" style="border: 0px solid red;width: 100%;display: flex;flex-direction: row">
          <el-row  style="width: 100%">
            <span style="border: 1px solid #ccc;border-radius: 5px;padding: 5px">{{getDateFormater(ad.end)}}</span>
          </el-row>
          <el-row  style="border: 0px solid red;display: flex;flex-direction: row;margin-left: 10px">
            <el-button  size="mini" type="text" @click="delay =true">延期</el-button>
            <el-button v-if="(ad.end - new Date())>=0" size="mini" type="text" style="color:red" @click="disableAdBtn">下架</el-button>
          </el-row>
        </el-row>
        <el-row v-if="edit">
          <el-date-picker size="mini" v-model="ad.end" type="datetime"
                          placeholder="选择日期时间" default-time="12:00:00" value-format="timestamp"
                          format="yyyy-MM-dd HH:mm:ss"/>
        </el-row>
        <el-row v-else-if="delay">
          <el-date-picker size="mini" v-model="ad.end" type="datetime"
                          placeholder="选择日期时间" default-time="12:00:00" value-format="timestamp"
                          format="yyyy-MM-dd HH:mm:ss"/>
          <i class="el-icon-check" @click="saveDelay" style="color: green"></i>
          <i class="el-icon-minus" @click="delay = false"></i>
        </el-row>
      </el-form-item>
    </el-form>
    <el-form label-width="80px">
      <el-form-item label="内容类型">
        <sel-content-type :item="ad" type="ad" v-on:change="show = false"></sel-content-type>
      </el-form-item>
      <el-form-item v-if="ad.contentType && ad.departmentId" label="具体内容">
        <el-row>
          <el-col :span="2">
            {{ad.contentValue}}
          </el-col>
          <el-col :span="10">
            <el-button size="mini" type="text" @click="show = !show">{{show?'<<< '+'收起' :'展开'+' >>>'}}</el-button>
          </el-col>
        </el-row>
        <el-row v-if="show">
          <sel-content-val :item="ad" :departmentId="ad.departmentId" v-on:selVal="selValEvent"></sel-content-val>
        </el-row>
      </el-form-item>
      <el-form-item v-if="ad.data.hasOwnProperty('prices')" label="原价">
        <el-input size="mini" v-model="ad.data.prices" style="width:50%"></el-input>
      </el-form-item>
      <el-form-item v-if="ad.data.hasOwnProperty('discount')" label="优惠价">
        <el-input size="mini" v-model="ad.data.discount" style="width:50%"></el-input>
      </el-form-item>
      <el-form-item label="图片">
        <el-row>
          <el-col :span="12">
            <upload-img v-on:get="getImgUrl"></upload-img>
            <el-input size="mini" v-model="ad.img" style="width: 90%"></el-input>
          </el-col>
          <el-col :span="12" v-if="ad.img !== ''">
            <img :src="ad.img" width="60%"/>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="" v-if="edit">
        <el-button size="mini" :type="ad.id?'success':'primary'" @click="confirmBtn">{{ad.id?'保存':'新建'}}</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  import filterTool from '@/common/filterTool'
  import selContentVal from '@/components/app/appAd/selContentVal'
  import selContentType from '@/components/app/appAd/selContentType'
  import uploadImg from  '@/common/uploadImg'
  import dateFormater from '@/common/date-formater'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "newAd",
    components:{uploadImg,selContentVal,selContentType,filterTool},
    props:['ad'],
    data(){
      return {
        show:false,
        showSelVal:false,
        edit:false,
        delay:false,
        departmentId:null
      }
    },
    watch:{
      ad(nv,ov){
        if(nv){
          this.init(nv)
        }
      }
    },
    created(){
      this.init(this.ad)
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      //初始化----判断ad是否能编辑、延期等--------------------------------------
      init(ad){
        console.log('看下当前ad--------',ad)
        this.departmentId=ad.departmentId
        if(ad.id){
          this.edit = this.judgeEdit()
        }else {
          this.edit = true
        }
        if(ad.data.contentType){
          ad.contentType=ad.data.contentType
          ad.contentValue=ad.data.contentValue
        }
      },
      judgeEdit(){//判断能否编辑
        let currData=new Date()
        let startData=this.ad.start
        let edit=currData < startData
        console.log('判断能否编辑',edit)
        return edit
      },
      //广告延期----------------------------------------------------------------------
      saveDelay(){
        let tmp ={id:this.ad.id,end:''+dateFormater.formatDatetime(this.ad.end)}
        this.delayAd(tmp)
      },
      delayAd(data){
        this.fetch({name:"delayAd",data})
          .then(res=>{
            this.$message({type:'success',message:'操作成功！'})
            this.$emit('cancelDialog',res)
            this.delay = false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      disableAdBtn(){//广告下架----即修改结束时间为当前时间
        let tmp ={id:this.ad.id,end:''+dateFormater.formatDatetime(new Date())}
        this.delayAd(tmp)
      },
      getDateFormater(e){//格式化显示的时间
        return dateFormater.formatDatetime(e)
      },
      getDepartmentId(e){//新建广告时选择部门
        console.log('看看传来了什么————————',e)
        this.ad.departmentId=e.departmentId
        this.show=false
      },
      getImgUrl(e) {//上传获取广告图片
        if(this.ad.img === undefined){
          Vue.set(this.ad,'img',e[0].url)
          return
        }
        this.ad.img = e[0].url
      },
      confirmBtn(){
        //最后把关是否能编辑
        let edit = this.judgeEdit()
        if(this.ad.id && !edit){
          this.$message({type:'error',message:'禁止更新：AD展示中 或 起始时间错误'})
          return
        }
        this.newAdEvent(this.ad)
      },
      //新建或保存ad
      newAdEvent(e){
        let tmp={...e}
        tmp.start=''+dateFormater.formatDatetime(e.start)
        tmp.end=''+dateFormater.formatDatetime(e.end)
        console.log('看下参数————————',tmp)
        if(e.id){//保存
          this.updateAd(tmp)
        }else {//新建
          this.createAd(tmp)
        }
      },
      createAd(data){//新建ad
        this.fetch({name:"createAd",data})
          .then(res=>{
            console.log(res)
            this.$message({type:'success',message:'创建成功！'})
            this.$emit('cancelDialog',res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      updateAd(data){//更新ad
        this.fetch({name:"updateAd",data})
          .then(res=>{
            console.log(res)
            this.$message({type:'success',message:'保存成功！'})
            this.$emit('cancelDialog',res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      selValEvent(e){//选中广告内容后赋值
        this.ad.contentValue=e
      }
    }
  }
</script>

<style scoped>

</style>
